<template>
	<div style="padding: 10px 20px; max-width:1486px; margin: 0 auto;">
		<el-form :inline="true">
			<el-form-item>
				<el-input v-model="search" placeholder="教师号或姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button>查询</el-button>
				<el-button type="primary" @click="newStudentDialogVisible = true"  icon="el-icon-plus">新增教师</el-button>
				<el-button type="danger" :disabled="!checkBoxSelected" @click="batchDel">批量删除</el-button>|
				<!-- <el-button type="info" @click="batchEditor">批量编辑</el-button> -->
				<!-- <el-button type="info" @click="getClassStudent">刷新</el-button> -->
				<el-button type="success" @click="getClassStudent(); isSearch = false;" plain>
					{{ refreshing ? '加载中' : '刷新'}}
					<i
						:class=" refreshing ? 'el-icon-loading' : 'el-icon-refresh'"
					></i>
				</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="class">
			<el-table
				:data="teacherList"
				row-key="id"
				style="width: 100%"
				ref="table"
				@selection-change="handleSelectionChange"
			>
				<!-- 选择框  -->
				<el-table-column type="selection" width="40"></el-table-column>
				<el-table-column prop="id" label="教师号"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="sex" label="性别"></el-table-column>
				<el-table-column prop="specialty" label="专业"></el-table-column>
				<el-table-column label="操作" width="145">
					<template slot-scope="scope">
						<el-button title="编辑" type="primary" plain @click="edior(scope.$index, scope.row)">
							<i class="el-icon-edit"></i>
						</el-button>
						<el-button title="删除" type="danger" plain @click="singleDel(scope.$index, scope.row)">
							<i class="el-icon-delete"></i>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 	@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle" -->
			 <el-pagination
			
				:current-page="pageIndex"
				:page-sizes="[10, 15,20, 40, 50, 70, 100]"
				:page-size="pageSize"
				:total="totalPage"
				layout="total, sizes, prev, pager, next, jumper"
			></el-pagination>
		</el-row>
		<el-dialog class="new-student-dialog" title="新增教师" :visible.sync="newStudentDialogVisible">
			<NewTeacher/>
		</el-dialog>
	</div>
</template>

<script>
import NewTeacher from "./new-teacher.vue";
export default {
	data() {
		return {
			classList: [],
			studentData: [],
			teacherList: [],
			selectClassId: "",
			checkBoxSelected: false,
			search: "",
			newStudentDialogVisible: false,
			multipleSelection: [],
			isHandling: false, // 在操作中， 增删改查
			totalPage: 8,
            pageIndex: 1,
			pageSize: 10,
			refreshing: false
		};
	},
	components: {
		NewTeacher
	},
	created() {
		this.getTeacherList();
	},
	methods: {
		// 得到班级列表
		getTeacherList() {
			this.$http("/api/teacher/list").then(({ data }) => {
				console.log("data", data);
				this.teacherList = data.data;
			});
		},
		getClassList() {
			this.$http("/api/class/get").then(res => {
				this.selectClassId = res.data.data[0].id;
				this.newStudentClassId = res.data.data[0].id;
				this.classList = res.data.data;
				this.getClassStudent();
			});
		},
		// 得到一个班级的所有学生
		getClassStudent() {
			this.$http("/api/class/getStudentList", {
				params: { classId: this.selectClassId }
			})
				.then(res => {
					this.studentDataList[this.selectClassId] = res.data;
					this.studentData = res.data;
				})
				.catch(err => {});
		},
		classClick(item) {
			this.selectClassId = item.id;
			//   没有值
			if (!this.studentDataList[this.selectClassId]) {
				this.getClassStudent();
			} else {
				this.studentData = this.studentDataList[this.selectClassId];
			}
		},
		// 批量编辑
		batchEditor() {
			console.log("===================", this.$refs.table);
		},
		edior() {},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			if (val.length < 1) {
				this.checkBoxSelected = false;
			} else {
				this.checkBoxSelected = true;
			}
		},
		// 批量删除
		batchDel() {
			if (this.isHandling) return;
			this.isHandling = true;
			let data = [];
			this.multipleSelection.map(item => {
				data.push(item.id);
			});
			this.$http
				.post("/api/student/del", data)
				.then(({ data }) => {
					this.$message({
						message: data.msg,
						type: data.type
					});
					this.isHandling = false;
				})
				.catch(err => {
					this.isHandling = false;
				});
		},
		// 单个删除
		singleDel(index, row) {
			if (this.isHandling) return;
			this.isHandling = true;
			this.$http.post("/api/student/del", [row.id]).then(({ data }) => {
				this.$message({
					message: data.msg,
					type: data.type
				});
				this.studentDataList[this.selectClassId].splice(index, 1);
				this.isHandling = false;
			});
		}
	}
};
</script>

<style lang="scss" >
</style>